<template>
  <div class="game" style="display: block;">
    <div>首页</div>
    <div class="baground">
      <h1>打水杯游戏</h1>
      <button style="background-color: #477DEA ; border-radius: 20px; width: 100px;height: 40px;"
        @click="start">现在开始</button>
    </div>
  </div>
  <div class="game">
    <div>游戏页面</div>
    <div class="time">倒计时:{{ num }}秒</div>
    <div class="time">用时：{{ 60 - num }}秒</div>
    <div class="baground">
      <!--src="./gw1.PNG"   -->
      <img :src="image" @click="blood" alt="无法获取图片">
      <div class="b" style="width:150px;height: 10px; border: 1px solid black;">
        <div class="blood">
        </div>
      </div>
      <button style="background-color: #477DEA " @click="back">回到首页</button>
    </div>
  </div>

  <!-- <div class="game">
        <div>游戏页面</div>
      <div class="baground">
        <img src="./gw2.PNG" alt="">
        <button style="background-color: #477DEA ">回到首页</button>
      </div>
    </div> -->

</template>

<script setup>
import { ref } from 'vue'
let num = ref()
let image = ref('/src/work/gw1.PNG')
function start() {
  num.value = 60
  let arry = document.getElementsByClassName('game')
  arry[0].style.display = 'none'
  arry[1].style.display = 'block'
  console.log(image.value);
  console.log(image);
  let timer = setInterval(() => {
    if (parseInt(window.getComputedStyle(elements[0]).width) === 0) {
      clearInterval(timer)
      document.getElementsByClassName('time')[0].style.display = "none"
      document.getElementsByClassName('time')[1].style.display = "block"
    } else {
      document.getElementsByClassName('time')[0].style.display = "block"
      if (num.value > 0) {
        num.value = num.value - 1
      } else {

      }
    }
  }, 1000)

}
function back() {
  let arry = document.getElementsByClassName('game')
  arry[0].style.display = 'block'
  arry[1].style.display = 'none'
}

const elements = document.getElementsByClassName('blood');
function blood() {
  if (elements.length > 0) {
    const element = elements[0];
    // 获取计算样式
    const style = window.getComputedStyle(element);
    const width = style.width;
    console.log(width);
    // 将宽度值解析为数字，减去10，再转换回带单位的字符串
    if (parseInt(width) > 0) {
      const newWidth = parseInt(width) - 10 + "px";
      console.log(newWidth);
      // 要修改宽度，需通过元素的style属性
      element.style.width = newWidth;
    }
    else {
      console.log('sss');
      //image.value="/src/work/gw2.PNG"
      image.value = '/src/work/gw2.PNG'
      console.log(image);
      document.getElementsByClassName("b")[0].style.display = "none"
    }
  }


}

</script>

<style scoped>
.game {
  width: 200px;
  height: 300px;
  border: 1px solid grey;
  justify-items: center;
  align-items: center;
  display: none;
}

.game>div:nth-child(1) {
  width: 100%;
  height: 25px;
  border: 1px solid grey;
  text-align: center;


}

.baground {
  height: 100px;
  /* background-color: grey; */
  margin: 0 10px;
  text-align: center;

}

.blood {
  width: 150px;
  height: 100%;
  background-color: red;
}

.time {
  display: none;
}
</style>